<template>
	<view class="app">
		<view class="cell ">
			<text class="tit fill">头像</text>
			<view class="avatar-wrap" @click="toChooseImage">
				<image class="avatar" :src="tempAvatar || userInfo.avatar || '/static/my/avatar.png'">
				</image>
				<!-- 进度遮盖 -->
				<view class="progress center" :class="{
						'no-transtion': uploadProgress === 0,
						show: uploadProgress != 100
					}" :style="{
						width : uploadProgress + '%',
						height: uploadProgress + '%',
					}"></view>
			</view>
		</view>
		<u-cell-group>
			<u-cell size="large" title="昵称" :value="userInfo.nickname" isLink @click="nicknameClick"></u-cell>
			<u-cell size="large" title="手机号" :value="userInfo.mobile"></u-cell>
			<u-cell size="large" title="密码" value="修改密码" isLink @click="passwordClick"></u-cell>
		</u-cell-group>
		<u-modal :show="nicknameOpen" width="auto" title="修改昵称" showCancelButton @confirm="nicknameSubmit" @cancel="nicknameCancel">
			<view class="slot-content">
				<u--form labelPosition="left" :model="nicknameForm" :rules="nicknameRules" ref="nicknameForm"
					errorType="toast">
					<u-form-item prop="nickname">
						<u--input v-model="nicknameForm.nickname"  placeholder="请输入昵称" border="bottom" ></u--input>
					</u-form-item>
				</u--form>
			</view>
		</u-modal>
		<u-modal :show="passwordOpen" width="auto" title="修改密码" showCancelButton @confirm="passwordSubmit" @cancel="passwordCancel">
			<view class="slot-content">
				<u--form labelPosition="left" :errorType="'message'" borderBottom :model="passwordForm"
					:rules="passwordRules" ref="passwordForm" errorType="toast">
					<u-form-item prop="oldPassword">
						<u--input type="password" v-model="passwordForm.oldPassword" placeholder="请输入旧密码"
							border="bottom"></u--input>
					</u-form-item>
					<u-form-item prop="newPassword">
						<u--input type="password" v-model="passwordForm.newPassword" placeholder="请输入新密码"
							border="bottom"></u--input>
					</u-form-item>
					<u-form-item prop="newPassword2">
						<u--input type="password" v-model="passwordForm.newPassword2" placeholder="请重复新密码"
							border="bottom"></u--input>
					</u-form-item>
				</u--form>
			</view>
		</u-modal>
	</view>
</template>

<script>
import {updateNickname, updatePassword} from '@/api/my/userProfile.js'
import {BASE_URL} from '@/common/js/request.js'

export default {
		data() {
			return {
				uploadProgress: 100, //头像上传进度
				tempAvatar: '',
				userInfo: {},
				// 用户名
				nicknameOpen: false,
				nicknameForm: {
					nickname: ''
				},
				nicknameRules: {
					nickname: [{
						required: true,
						message: '请输入昵称',
						trigger: ['blur', 'change']
					}]
				},
				// 密码
				passwordOpen: false,
				passwordForm: {
					oldPassword: '',
					newPassword: '',
					newPassword2: '',
				},
				passwordRules: {
					oldPassword: [{
						required: true,
						message: '请输入旧密码',
						trigger: ['blur', 'change']
					}],
					newPassword: [{
							required: true,
							message: '请输入新密码',
							trigger: ['blur', 'change']
						},
						{
							pattern:/^([a-zA-Z0-9_]){6,18}$/,
							message: '密码长度在6~18之间，只能包含字母、数字和下划线'
						}, {
							validator: (rule, value, callback) => {
								this.passwordForm.oldPassword !== value
							},
							message: '新旧密码不能一致'
						},
					],
					newPassword2: [{
						required: true,
						message: '请输入确认密码',
						trigger: ['blur', 'change']
					}, {
						validator: (rule, value, callback) => this.passwordForm.newPassword === value,
						message: '两次输入的密码不一致'
					}],
				},
			}
		},
		computed: {
			curUserInfo() {
				return this.$store.state.user.userInfo
			},
		},
		watch: {
			curUserInfo() {
				this.userInfo = this.curUserInfo;
			},
		},
		onLoad() {
			this.userInfo = uni.getStorageSync('userInfo');
		},
		methods: {
			// 点击修改密码
			passwordClick() {
				this.passwordForm = {
					oldPassword: '',
					newPassword: '',
					newPassword2: '',
				}
				this.passwordOpen = true;
				this.passwordForm.password = this.userInfo.password;
			},
			// 取消修改密码
			passwordCancel() {
				this.passwordOpen = false;
			},
			// 确定修改密码
			passwordSubmit() {
				this.$refs.passwordForm.validate().then(async () => {
					this.passwordOpen = false;
					let res = await updatePassword({
						"oldPassword": this.passwordForm.oldPassword,
						"password": this.passwordForm.newPassword
					});
					if (res) {
						this.$util.msg('修改成功');
						this.$store.commit('logout');
						uni.navigateTo({
							url: '/pages/login/index'
						})
					}
				}).catch(errors => {});
			},
			// 点击修改用户名
			nicknameClick() {
				this.nicknameOpen = true;
				this.nicknameForm.nickname = this.userInfo.nickname;
			},
			// 取消修改用户名
			nicknameCancel() {
				this.nicknameOpen = false;
			},
			// 确定修改用户名
			nicknameSubmit() {
				this.$refs.nicknameForm.validate().then(async () => {
					this.nicknameOpen = false;
					let res = await updateNickname(this.nicknameForm.nickname);
					if (res) {
						this.$util.msg('修改成功');
						this.$store.dispatch('obtainUserInfo');
					} else {
						this.$util.msg('修改失败')
					}
				}).catch(errors => {});
			},
			// 选择头像
			toChooseImage() {
				uni.chooseImage({
					count: 1,
					success(res) {
						uni.navigateTo({
							url: '/subPages/set/cutImage/cut?src=' + res.tempFilePaths[0]
						})
					}
				})
			},
			// 裁剪回调
			setAvatar(filePath) {
				let that = this;
				that.uploadProgress = 0
				that.tempAvatar = filePath
				const authToken = this.$util.getAuthToken();
				let id = that.$store.state.user.userInfo.id;
				let uploadTask = uni.uploadFile({
					filePath: filePath,
					url: BASE_URL + "/app-api/member/user/update-avatar",
					formData: {
						id: id
					},
					name: 'avatarFile',
					header: {
						'tenant-id': '1',
						'Authorization': authToken ? `Bearer ${authToken}` : ''
					},
					success() {
						this.$util.msg('修改成功');
						that.$store.dispatch('obtainUserInfo')
					}
				})

				uploadTask.onProgressUpdate((res) => {
					that.uploadProgress = res.progress;
				})
			}
		}
	}
</script>

<style scoped lang="scss">
	.app {
		padding: .5rem .5rem 0;
	}

	.cell {
		display: flex;
		justify-content: space-between;
		align-items: center;
		min-height: 5.5rem;
		padding: 0 2rem;

		&:first-child {
			margin-bottom: .5rem;
		}

		&:after {
			left: 2rem;
			right: 2rem;
			border-color: #d8d8d8;
		}

		.tit {
			font-size: 1.5rem;
			color: #333;
		}

		.avatar-wrap {
			width: 6rem;
			height: 6rem;
			position: relative;
			border-radius: 5rem;
			overflow: hidden;

			.avatar {
				width: 100%;
				height: 100%;
				border-radius: 5rem;
			}

			.progress {
				position: absolute;
				left: 50%;
				top: 50%;
				transform: translate(-50%, -50%);
				width: 5rem;
				height: 5rem;
				box-shadow: rgba(0, 0, 0, .6) 0rem 0rem 0rem 100.25rem;
				border-radius: 5rem;
				transition: .5s;
				opacity: 0;

				&.no-transtion {
					transition: 0s;
				}

				&.show {
					opacity: 1;
				}
			}
		}

		.input {
			flex: 1;
			text-align: right;
			font-size: 1.4rem;
			color: #333;
		}

		.tip {
			margin-left: 1rem;
			font-size: 1.4rem;
			color: #999;
		}

		.checkbox {
			padding: .6rem 0 .6rem 2rem;
			font-size: 1.4rem;
			color: #333;

			.mix-icon {
				margin-right: .6rem;
				font-size: 1.8rem;
				color: #ccc;
			}

			.icon-xuanzhong {
				color: $base-color;
			}
		}
	}
</style>
